import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    isEdit: false, //用来标记是否要编辑任务名的状态
    todoName: '',
  }
  // 这个函数用来传递id,删除任务
  handle = () => {
    // 将当前Item组件实例所对应的数据的id传递给App
    const { id } = this.props.todo
    this.props.delTodo(id)
  }
  // 这个函数用来传递id,修改任务
  updateHandle = () => {
    this.props.updateTodo(this.props.todo.id)
  }

  // 编辑或取消按钮的事件处理函数
  editHandle = () => {
    // 获取当前任务型的任务名,然后添加给添加的文本框
    const todoName = this.props.todo.todoName

    this.setState({
      isEdit: !this.state.isEdit,
      todoName,
    })
  }

  updateTodoName = (e) => {
    // 如果按下的是回车,并且输入的新任务名不为空,则继续往下执行
    if (e.key !== 'Enter' || !this.state.todoName) return
    // 将要修改数据的id和目标任务名传递给App
    this.props.editTodo(this.props.todo.id, this.state.todoName)
    this.setState({
      isEdit: false,
    })
  }

  render() {
    const { todoName, isDone } = this.props.todo

    return (
      <li>
        {this.state.isEdit ? (
          <input
            type="text"
            value={this.state.todoName}
            onChange={(e) => {
              this.setState({
                todoName: e.target.value.trim(),
              })
            }}
            onKeyDown={this.updateTodoName}
          />
        ) : (
          <label>
            <input
              type="checkbox"
              checked={isDone}
              onChange={this.updateHandle}
            />
            <span className={isDone ? 'active' : ''}>{todoName}</span>
          </label>
        )}
        <button className="btn btn-danger" onClick={this.handle}>
          删除
        </button>
        <button
          className="btn btn-edit"
          style={{ marginRight: 10 }}
          onClick={this.editHandle}
        >
          {this.state.isEdit ? '取消' : '编辑'}
        </button>
      </li>
    )
  }
}
